<template>
  <div id="app">
    <hose
      :obj="{
        flag: true,
        name1: '新增成员',
        btn1: false,
        btn2: true,
        price: `当前成员数:${num}`,
      }"
      @TopUp="Add"
    >
      <template #default>
        <div class="Search">
          <Search
            :iptObj="{
              title: '成员管理',
              regionBool: false,
              userText: '请输入成员姓名',
              userTitle: '成员姓名',
              userBool: true,
              userTel: '联系方式',
              telText: '请输入联系方式',
              telrBool: true,
              BtnBool: true,
            }"
            @onSubmit="btnSearch"
          ></Search>
        </div>
        <Table
          :tableArr="{
            eid: '成员编号',
            ename: '姓名',
            sex: '性别',
            etel: '联系方式',
            hiredate: '入职时间',
            fun: '职能',
          }"
          :operationObj="{
            title1: '业绩查看',
            title2: '修改',
            bool1: true,
            bool2: true,
            operation1: '点击查看',
            operation2: '点击修改',
            text1: true, // true 为文字类型
            text2: true,
          }"
          :tableData="tableData"
          @deleteRow1="Row1"
          @deleteRow2="Row2"
        ></Table>
      </template>
    </hose>
    <!-- 点击修改 -->
    <Mask
      @cancel="Cancel"
      ref="mask1"
      title="编辑成员"
      btnTitle="保存"
      :headright="false"
      @preservation="preservation"
    >
      <template v-slot:main>
        <div class="content">
          <div class="left">
            <div class="Hang">
              <p>
                <span>成员编号</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-input class="Inp" v-model="input1" disabled />
            </div>
            <div class="Hang">
              <p>
                <span>性别</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-radio-group v-model="radio">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </div>
            <div class="Hang">
              <p>
                <span>入职时间</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-date-picker
                class="Inp"
                v-model="Time"
                type="date"
                placeholder=" 年 / 月 / 日"
                size="default"
              />
            </div>
            <div class="Hang">
              <p>
                <span>职能选择</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="回收" name="type" />
                <el-checkbox label="上门" name="type" />
                <el-checkbox label="送货" name="type" />
              </el-checkbox-group>
            </div>
          </div>
          <div class="right">
            <div class="Hang">
              <p>
                <span>成员姓名</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-input class="Inp" v-model="name" />
            </div>
            <div class="Hang">
              <p>
                <span>联系方式</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-input class="Inp" v-model="NumberNum" />
            </div>
          </div>
        </div>
      </template>
    </Mask>
    <!-- 点击新增 -->
    <Mask
      ref="maskAdd"
      @cancel="Cancel"
      title="新增成员"
      btnTitle="新增"
      :headright="false"
      @preservation="MemberAdd"
    >
      <template v-slot:main>
        <div class="content">
          <div class="left">
            <div class="Hang">
              <p>
                <span>成员编号</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-input
                class="Inp"
                v-model="input2"
                placeholder="请输入成员编号"
              />
            </div>
            <div class="Hang">
              <p>
                <span>性别</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-radio-group v-model="radio">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </div>
            <div class="Hang">
              <p>
                <span>入职时间</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-date-picker
                class="Inp"
                v-model="Time1"
                type="date"
                placeholder=" 年 / 月 / 日"
                size="default"
              />
            </div>
            <div class="Hang">
              <p>
                <span>职能选择</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-checkbox-group v-model="form1.type">
                <el-checkbox label="回收" name="type" />
                <el-checkbox label="上门" name="type" />
                <el-checkbox label="送货" name="type" />
              </el-checkbox-group>
            </div>
          </div>
          <div class="right">
            <div class="Hang">
              <p>
                <span>成员姓名</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-input
                class="Inp"
                v-model="name1"
                placeholder="请输入成员姓名"
              />
            </div>
            <div class="Hang">
              <p>
                <span>联系方式</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-input
                class="Inp"
                v-model="NumberNum1"
                placeholder="请输入你的联系方式"
              />
            </div>
          </div>
        </div>
      </template>
    </Mask>
    <!-- 点击查看 -->
    <Mask ref="maskSee" title="业绩查看" :isShow="false" :headright="false">
      <template v-slot:main>
        <el-table :data="tableData1" stripe style="width: 100%">
          <el-table-column prop="month" label="月份" width="150" />
          <el-table-column prop="DoorToDoor" label="上门次数" width="150" />
          <el-table-column prop="recovery" label="回收次数" width="150" />
          <el-table-column prop="Delivery" label="送货次数" width="150" />
          <el-table-column prop="income" label="收入(币)" width="150" />
        </el-table>
        <div class="Pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="100"
            :page-size="10"
          />
        </div>
      </template>
    </Mask>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { makeBlock } from "@vue/compiler-core";
import { ref, reactive } from "vue";
import hose from "../../components/hose.vue";
import Mask from "../../components/Mask.vue";
import Search from "../../components/Search.vue";
import Table from "../../components/Table.vue";
import { Calendar } from "@element-plus/icons-vue";
// 引入 成员管理的api
import { employeeList, updateEmp, addEmp } from "../../api/index.js";
const tableData = ref([
  {
    成员编号: "CS20190911001",
    姓名: "刘小牛",
    性别: "女",
    联系方式: "13855625596",
    入职时间: "2019-9-15",
    职能: "回收",
    btn1: true,
  },
  {
    成员编号: "CS20190930002",
    姓名: "黄小姐",
    性别: "男",
    联系方式: "13855625593",
    入职时间: "2020-10-15",
    职能: "回收、上门、送货",
    btn1: true,
  },
  {
    成员编号: "CS20190911003",
    姓名: "马晓华",
    性别: "女",
    联系方式: "13855235596",
    入职时间: "2011-6-12",
    职能: "回收、送货",
    btn1: true,
  },
  {
    成员编号: "CS20190911004",
    姓名: "大壮",
    性别: "男",
    联系方式: "13855621322",
    入职时间: "2019-8-13",
    职能: "上门、送货",
    btn1: true,
  },
  {
    成员编号: "CS20190911005",
    姓名: "麻子",
    性别: "女",
    联系方式: "13855625596",
    入职时间: "2020-2-11",
    职能: "回收、送货",
    btn1: true,
  },
  {
    成员编号: "CS20190911006",
    姓名: "耿琴",
    性别: "女",
    联系方式: "13855678462",
    入职时间: "2000-8-11",
    职能: "回收、上门",
    btn1: true,
  },
  {
    成员编号: "CS20190911007",
    姓名: "灵狐娇娇",
    性别: "女",
    联系方式: "13853276596",
    入职时间: "2019-9-15",
    职能: "送货",
    btn1: true,
  },
  {
    成员编号: "CS20190911008",
    姓名: "杨雷雷",
    性别: "男",
    联系方式: "13813545596",
    入职时间: "2011-3-13",
    职能: "回收",
    btn1: true,
  },
  {
    成员编号: "CS20190911009",
    姓名: "袁鹏",
    性别: "男",
    联系方式: "13855623212",
    入职时间: "2021-8-11",
    职能: "上门",
    btn1: true,
  },
  {
    成员编号: "CS20190911010",
    姓名: "李黔江",
    性别: "男",
    联系方式: "13121225596",
    入职时间: "2015-2-22",
    职能: "送货",
    btn1: true,
  },
  {
    成员编号: "CS20190911011",
    姓名: "徐松",
    性别: "男",
    联系方式: "13854563596",
    入职时间: "2015-7-11",
    职能: "回收",
    btn1: true,
  },
]);
// 当前成员人数
const num = ref(7);
const List = () => {
  employeeList()
    .then((res) => {
      tableData.value = res.data.data.employee.records;
      num.value = tableData.value.length;
      console.log(tableData.value);
      tableData.value.forEach((item, index) => {
        let date = new Date(item.hiredate);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        var minute = date.getMinutes();
        let time = y + "-" + m + "-" + d;
        tableData.value[index].hiredate = time;
      });
    })
    .catch((error) => {
      console.log(error);
    });
};
List();
// 点击查看数据
const tableData1 = ref([
  {
    month: "2019-10",
    DoorToDoor: "12",
    recovery: "30",
    Delivery: "23",
    income: "265",
  },
  {
    month: "2019-9",
    DoorToDoor: "12",
    recovery: "30",
    Delivery: "23",
    income: "265",
  },
  {
    month: "2019-8",
    DoorToDoor: "12",
    recovery: "30",
    Delivery: "23",
    income: "265",
  },
  {
    month: "2019-7",
    DoorToDoor: "12",
    recovery: "30",
    Delivery: "23",
    income: "265",
  },
  {
    month: "2019-6",
    DoorToDoor: "12",
    recovery: "30",
    Delivery: "23",
    income: "265",
  },
  {
    month: "2019-5",
    DoorToDoor: "12",
    recovery: "30",
    Delivery: "23",
    income: "265",
  },
]);
// 倒计时时间
const timeDao = ref(2 * 60 * 60 * 1000);
// 点击 查看的标签
const maskSee = ref(null);
// 点击修改的标签
const mask1 = ref(null);
// 点击 新增的标签
const maskAdd = ref(null);
// 修改里面的成员编号(不可修改)
const input1 = ref("CS20190914001");
// 新增里面的成员编号
const input2 = ref("");
// 修改里面的成员号码
const NumberNum = ref("18785627148");
// 新增里面的成员号码
const NumberNum1 = ref("");
// 修改里面的成员号码
const name = ref("张三");
// 新增里面的成员姓名
const name1 = ref("");
// 修改里面的成员性别
const radio = ref("男");
// 新增里面的时间
const Time1 = ref("");
// 修改里面的时间
const Time = ref("");
// 修改职能选择的修改
const form = reactive({
  type: [],
});
// 新增里面的职能修改
const form1 = reactive({
  type: [],
});
// 点击查看
const Row1 = (index) => {
  maskSee.value.open();
  console.log(index, "点击查看");
};
// 点击修改
let Num = ref(0);
const Row2 = (index) => {
  Num.value = index;
  const tmp = tableData.value[index];
  input1.value = tmp.eid;
  NumberNum.value = tmp.etel;
  name.value = tmp.ename;
  radio.value = tmp.sex;
  Time.value = tmp.hiredate;
  // 字符串转数组
  if (typeof tmp.fun == "string") {
    form.type = tmp.fun.split(",");
  } else if (typeof tmp.fun == "object") {
    form.type = tmp.fun;
  }
  mask1.value.open();
};
// 点击搜索
const btnSearch = (name) => {
  // 姓名和电话号码至少写一项才能请求接口展示页面
  if (name.user != "" || name.tel != "") {
    console.log(name.user, name.tel);
    employeeList(1, 1, 10, name.user, name.tel)
      .then((res) => {
        if (res.data.data.employee.records.length == 0) {
          ElMessage({
            type: "error",
            message: "没有搜索到这条成员信息哦",
          });
        } else {
          ElMessage({
            type: "success",
            message: "成功搜索",
          });
          tableData.value = res.data.data.employee.records;
          num.value = tableData.value.length;
          console.log(tableData.value);
          tableData.value.forEach((item, index) => {
            let date = new Date(item.hiredate);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = date.getDate();
            d = d < 10 ? "0" + d : d;
            var h = date.getHours();
            var minute = date.getMinutes();
            let time = y + "-" + m + "-" + d + " " + h;
            tableData.value[index].hiredate = time;
          });
        }
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });
  } else {
    ElMessage({
      type: "warning",
      message: "亲,你没有输入关键字,我不知道你要找谁哦",
    });
  }

  console.log("点击搜索");
};

// 点击修改里面的保存操作
const preservation = () => {
  // 必填项必须必填之后才能保存成功
  if (
    NumberNum.value == "" ||
    name.value == "" ||
    form.type.length == 0 ||
    Time.value == null
  ) {
    ElMessage({
      message: "修改失败(必填字段必填)",
      type: "error",
      duration: 2000,
    });
  } else {
    // tableData.value[Num.value].成员编号 = input1.value;
    // tableData.value[Num.value].联系方式 = NumberNum.value;
    // tableData.value[Num.value].姓名 = name.value;
    // tableData.value[Num.value].性别 = radio.value;
    // tableData.value[Num.value].职能 = form.type;
    // 标准时间 转化成 年/月/日
    if (Time.value == null) {
      // console.log("入职时间没发生修改或为空");
    } else {
      // let year = Time.value.getFullYear();
      // let month = Time.value.getMonth() + 1;
      // let day = Time.value.getDate();
      // let formatting = year + "-" + month + "-" + day;
      // tableData.value[Num.value].入职时间 = formatting;
      ElMessageBox.confirm("你确定要修改吗?", "修改成员信息", {
        confirmButtonText: "确认",
        cancelButtonText: "返回",
        type: "warning",
      })
        .then(() => {
          ElMessage({
            type: "success",
            message: "修改成功",
          });
          let aaa = form.type.toString();
          console.log(aaa);
          console.log(
            input1.value,
            NumberNum.value,
            name.value,
            radio.value,
            aaa,
            Time.value
          );
          // 调用接口修改成员信息
          updateEmp(
            input1.value,
            NumberNum.value,
            name.value,
            radio.value,
            aaa,
            Time.value,
            1
          )
            .then((res) => {
              console.log(res);
            })
            .catch((error) => {
              console.log(error);
            });
          List();
          // 关闭弹出层
          mask1.value.Tube();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "修改失败",
          });
        });
    }
    // ElMessage({
    //   message: "修改成功",
    //   type: "success",
    //   duration: 2000,
    // });
  }
};
// 点击修改里面的取消操作
const Cancel = () => {
  mask1.value.Tube();
  maskAdd.value.Tube();
};
// 点击新增
const Add = () => {
  input2.value = "";
  NumberNum1.value = "";
  name1.value = "";
  Time1.value = null;
  form1.type = [];
  maskAdd.value.open();
};
// 点击新增里面的 新增成员按钮
const ObjAdd = reactive({});
const MemberAdd = () => {
  if (
    input2.value == "" ||
    NumberNum1.value == "" ||
    name1.value == "" ||
    Time1.value == null ||
    form1.type.length == 0
  ) {
    ElMessage({
      message: "新增失败(必填字段必填)",
      type: "error",
      duration: 2000,
    });
  } else {
    ObjAdd.eid = input2.value;
    ObjAdd.ename = name1.value;
    ObjAdd.sex = radio.value;
    ObjAdd.etel = NumberNum1.value;
    let year = Time1.value.getFullYear();
    let month = Time1.value.getMonth() + 1;
    let day = Time1.value.getDate();
    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    console.log(month, day);
    let formatting = year + "-" + month + "-" + day;
    ObjAdd.hiredate = formatting;
    ObjAdd.fun = form1.type;
    ObjAdd.btn1 = true;
    tableData.value.push(ObjAdd);
    ElMessage({
      message: "新增成功",
      type: "success",
      duration: 2000,
    });
    addEmp(
      input2.value,
      NumberNum1.value,
      name1.value,
      radio.value,
      form1.type,
      Time1.value
    )
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });
    num.value = tableData.value.length;
    maskAdd.value.Tube();
  }
};
</script>

<style lang="less" scoped>
#app {
  height: 100%;
}

.Pagination {
  margin: 50px 20%;
  width: 200px;
}

.Search {
  border-bottom: 1px solid rgba(125, 125, 125, 0.2);
}

.content {
  display: flex;

  .left {
    width: 50%;

    .Hang {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      p {
        width: 120px;
        text-align: right;
        margin-right: 20px;
      }

      .Inp {
        width: 200px;
        font-family: "Microsoft YaHei UI";
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        background-color: transparent;
      }
    }
  }

  .right {
    width: 50%;

    .Hang {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      p {
        width: 120px;
        text-align: right;
        margin-right: 20px;
      }

      .Inp {
        width: 200px;
        font-family: "Microsoft YaHei UI";
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        background-color: transparent;
      }
    }
  }
}
</style>
